<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="用 户 设 置">
      <mt-button icon="back" slot="left" @click="goBack('more')">返回 </mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="main">
      <div class="img">
        <img src="../../assets/images/portrait.jpg" alt="" />
      </div>
      <van-cell-group>
        <van-field label="用户编号" :value="user.uid" disabled />
        <van-field label="用户账号" :value="user.userNum" disabled />
        <van-field
          label="密码"
          :value="user.pwd"
          :type="isCheck == true ? 'password' : 'number'"
          :readonly="isCheck"
        />
        <van-field
          label="本人姓名"
          :value="user.userName"
          :readonly="isCheck"
        />
        <van-field label="身份证" :value="user.personId" :readonly="isCheck" />
        <van-field
          label="联系方式"
          :value="user.phoneNum"
          :readonly="isCheck"
        />
      </van-cell-group>
      <!-- 修改信息按钮 -->
      <div class="modify">
        <van-button icon="plus" type="primary" round @click="checkBtn"
          >修改信息</van-button
        >
      </div>
    </div>

    <!-- 确认修改按钮 -->
    <div class="btnClick">
      <van-button
        @click="confirmBtn"
        type="primary"
        round
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        >提交修改</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "userSetUp",

  data() {
    return {
      isCheck: true, //是否禁用表单
      // 用户数据
      user: {
        uid: null, //用户编号
        userNum: "18981072413", //用户账号
        pwd: "5201314",
        userName: "种子选手", //姓名
        personId: "510682199806216811", //身份证
        phoneNum: "18981072413", //联系方式
      },
    };
  },

  created() {
    this.getUserMsg();
  },

  mounted() {},

  methods: {
    //获取当前登录用户信息
    getUserMsg() {
      //从localStorage获取uid
      this.user.uid = window.localStorage.getItem("uid");
      console.log('uid： ' + this.user.uid);
    },
    goBack(index) {
      this.$router.push({
        path: "./index",
        query: { index },
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //修改信息按钮点击
    checkBtn() {
      this.isCheck = false;
      Toast({
        message: "当前可修改信息",
      });
    },
    //提交修改按钮
    confirmBtn() {
      if (this.isCheck) {
        Toast({
          message: "请点击修改信息按钮，修改信息",
        });
      } else {
        Dialog.confirm({
          title: "确认修改信息",
          message: "是否确认修改信息，请牢记个人密码",
          confirmButtonColor: "#07c160",
          cancelButtonColor: "#ff976a",
        })
          .then(() => {
            //调用修改接口,
            this.setUpInterface();
          })
          .catch(() => {
            console.log("cancel");
          });
      }
    },
    //修改信息的接口
    setUpInterface() {
      Toast({
        message: "success",
      });
      this.isCheck = true;
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.main {
  padding-top: 20px;
  .img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.van-cell {
  padding: 10px 60px;
}
.modify {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnClick {
  margin-top: 50px;
}
</style>